<template>
    <div class="gxCardBox">
        <div class="cardBoxTop">
            <div class="cardBoxTitle">{{ title }}</div>
            <div class="cardBoxTopText">{{ text }}</div>
        </div>
        <div class="TabsBox">
            <el-tabs v-model="currentValue"  class="demo-tabs">
                <el-tab-pane 
                    v-for="item in TabsList" :key="item.name" 
                    :label="item.dictLabel"
                    :name="item.dictValue">
                    <slot name="nr"></slot>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from "vue";
const props = defineProps({
    title: {
        type: String,
        default: '默认标题'
    },
    text: {
        type: String,
        default: '默认'
    },
    modelValue: {  // 使用标准v-model命名
        type: String,
        default: '01'
    },
    TabsList: {
        type: Array,
        default: () => []
    }
});
const emit = defineEmits(['update:modelValue']);  // 声明emit事件
const currentValue = ref(props.modelValue);  // 创建本地响应式变量

// 添加watch监听变化
watch(currentValue, (newVal) => {
    emit('update:modelValue', newVal);
});
</script>
<style scoped lang="scss">
.gxCardBox {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F4F9FF 0%, #FFFFFF 19%), #FFFFFF;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 20px;

    .cardBoxTop {
        display: flex;
        align-items: flex-end; // 底部对齐
        margin-bottom: 15px; // 增加下边距

        .cardBoxTitle {
            font-weight: bold;
            font-size: 30px;
            color: #1F1F1F;
            line-height: 1;
        }

        .cardBoxTopText {
            margin-left: 15px;
            font-size: 12px;
            color: #7D7D7D;
        }
    }

    .TabsBox {
        margin-top: 20px;
    }
}

:deep(.el-tabs) {
    .el-tabs__item.is-active {
        color: $green-color !important; // 激活文字颜色
    }

    .el-tabs__item {
        padding: 20px 30px !important; // 增加左右间距
        margin: 0 4px; // 添加项间距
    }

    .el-tabs__active-bar {
        background-color: $green-color !important; // 激活条颜色
        height: 3px; // 加粗激活条
    }

    .el-tabs__nav-prev,
    .el-tabs__nav-next {
        .el-icon {
            font-size: 18px; // 加大箭头尺寸

            svg {
                fill: #666; // SVG图标颜色
            }
        }
    }
}
</style>